<template>
    <div id='every-statistics'>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item >首页</el-breadcrumb-item>
          <el-breadcrumb-item>运营数据</el-breadcrumb-item>
          <el-breadcrumb-item>每日损益统计</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <div class="header-top">
                <div class="header-item">
                  <div class="header-item-left mr24">放款日期</div>
                  <el-date-picker                        
                    type="daterange"
                    range-separator="至"
                    @change="pickTime"
                    start-placeholder="开始日期"
                    format="yyyy-MM-dd"
                    v-model="custTime"
                    value-format="yyyy-MM-dd"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </div>
                <div class="header-button mr24">
                  <el-button type="primary" @click="search">搜索</el-button>
                </div>
                <div class="header-button mr24">
                  <el-button type="plain"  @click="clearFn">取消</el-button>
                </div>
                <div class="header-button">
                  <el-button type="plain" class="btn-left" :loading="isdonwload" @click="donwload">导出表格<i class="el-icon-download el-icon--right"></i></el-button>
                </div>
            </div>
          </el-card>
          <div class="tit-header">
              <div class="titfl mr24 ml20">
                  <img class="pic" src="../images/mark.png" alt="">
              </div>
              <div class="titfl">
                  以放款日作为基准点，统计放款当日的损益情况
              </div>
          </div>  
          <el-card class="box-card box-card1">
              <div class="header-button1">
                  <el-button type="plain" @click="refresh">刷新<i class="el-icon-refresh el-icon--right"></i></el-button>
              </div>
              <el-table
                :data="tableData"
                v-loading="loading"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="dateTime"
                  label="日期"
                  min-width="118"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="lendAmount"
                  align="center"
                  min-width="100"
                  label="借款金额">
                </el-table-column>
                <el-table-column
                  prop="lendCount"
                  align="center"
                  min-width="100"
                  label="放款笔数">
                </el-table-column>
                <el-table-column
                  prop="lendRealAmount"
                  align="center"
                  min-width="100"
                  label="实际到账金额">
                </el-table-column>
                <el-table-column
                  prop="afterLendlendCount"
                  align="center"
                  min-width="100"
                  label="复借笔数">
                </el-table-column>
                <el-table-column
                  prop="totalRepayAmount"
                  align="center"
                  min-width="100"
                  label="还款总额">
                </el-table-column>
                <el-table-column
                  prop="waitRrepaylendCount"
                  align="center"
                  min-width="100"
                  label="待还笔数">
                </el-table-column>
                <el-table-column
                  prop="waitRepayPrincipal"
                  align="center"
                  min-width="100"
                  label="待还本金">
                </el-table-column>
                <el-table-column
                  prop="extendAmount"
                  align="center"
                  min-width="100"
                  label="展期金额">
                </el-table-column>
                <el-table-column
                  prop="exetendlendCount"
                  align="center"
                  min-width="100"
                  label="展期次数">
                </el-table-column>
                <el-table-column
                  prop="overdueFeeAmount"
                  align="center"
                  min-width="100"
                  label="逾期费">
                </el-table-column>
                <el-table-column
                  prop="remissionAmount"
                  align="center"
                  min-width="100"
                  label="减免总费">
                </el-table-column>
                <el-table-column
                  align="center"
                  min-width="168"
                  prop="createAt"
                  label="当日损益">
                  <template slot="header" slot-scope="scope">
                      <div style="float:left;">当日损益</div>
                      <el-tooltip class="item" effect="dark" content="当日损益=当日还款总额-实际到账金额" placement="top">
                          <img style="width:20px;height:20px;float:left;margin-top:7%" src="../images/question.png" alt="">
                        </el-tooltip>
                     
                  </template>
                  <template slot-scope="scope">
                      <div :class="[(scope.row.gainsLossesAmount)>0 ? 'green' : 'red','cell']">
                        {{scope.row.gainsLossesAmount}}
                      </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="elpa">
                <el-pagination 
                  v-show="tableData.length" 
                  class="pan"  
                  @current-change="handleCurrentChangeone" 
                  :current-page="pageIndex"  
                  layout="total, prev, pager, next, jumper" 
                  :pager-count="5"
                  :total="total" 
                  :background="true">
                </el-pagination>  
              </div>
              
          </el-card>
    </div>

</template>
<script>
    import  { mapGetters, mapActions }  from 'vuex'
    import imagesView from '../components/ImagesView.vue'
    import { statisticsApi } from '../api/api'
    import { convertRequestURL } from '../utils/utils'
    import moment from 'moment'
    var acc = require('../utils/float.js');
    export default {
        components:{
            imagesView,
        },
        data() {
            return {
                tableData: [],
                loading:false,
                pageIndex:1,
                total:null,
                pageSize:10,
                isdonwload:false,
                removeId:"",
                startTime:"",
                endTime:"",
                custTime:"",
                tableData1: [],
            }
        },
        computed:{
            ...mapGetters([
                'localInfo',
            ]),
        },
        methods:{
            handleCurrentChangeone(val) {
                console.log(`当前页: ${val}`);
                this.pageIndex=val;
                this.ininList()
            },
            pickTime(data){
                if(data){
                    this.startTime=data[0]
                    this.endTime=data[1]
                  }else{
                     this.startTime=""
                    this.endTime=""
                  }
            },
            search(){
                this.pageIndex=1;
                this.ininList()
            },
            refresh(){
                this.pageIndex=1;
                this.ininList()
            },
            ccn(row, column, cellValue){
                if(!cellValue){
                    return '--'
                }else{
                    return cellValue
                }
            },
            ccndivided(row, column, cellValue){
                if(!cellValue){
                    return '--'
                }else{
                   return acc.accFloating.div(cellValue,100)
                }
                //return cellValue
            },
            accDiv(arg1, arg2) {
                var t1 = 0, t2 = 0, r1, r2;
                try { t1 = arg1.toString().split(".")[1].length } catch (e) { }
                try { t2 = arg2.toString().split(".")[1].length } catch (e) { }
                r1 = Number(arg1.toString().replace(".", ""))
                r2 = Number(arg2.toString().replace(".", ""))
                return (r1 / r2) * Math.pow(10, t2 - t1);
            },
            time(row, column, cellValue){
              if(cellValue){
                return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
              }else{
                return '--'
              }
            },
            //清楚搜索条件
            clearFn(){
                this.custTime=""
                this.startTime=""
                this.endTime=""
            },

            //初始化函数
            ininList(){
                let msg = {
                  lendTimeFrom:this.startTime,
                  lendTimeTo:this.endTime,
                  pageIndex:this.pageIndex,
                  pageSize:this.pageSize,
                }
                this.loading=true
                statisticsApi.lendDailyProfitLossList(msg)
                .then(result=>{
                    console.log(result)
                    this.tableData=result.records
                    this.loading=false
                    this.pageIndex=result.pageNum
                    this.total=result.totalCount
                })
                .catch(error => {
                    console.error(error)
                    this.loading=false
                })
            },
            //下载黑名单
            donwload(){
                this.$confirm('此操作将下载每日损益统计, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                      let msg = {
                        lendTimeFrom:this.startTime,
                        lendTimeTo:this.endTime,
                        pageIndex:this.pageIndex,
                        pageSize:this.pageSize,
                      }
                      statisticsApi.lendDownDailyProfitLossList(msg)
                      .then(result=>{
                          console.log(result)
                          window.location.href=result.downloadUrl
                      })
                      .catch(error => {
                          console.error(error)
                          this.loading=false
                      })

                  }).catch(() => {
                    //失败函数      
                  });
                
            },
        },
        mounted(){
        },
        created(){
            this.ininList()
            
        },
    }
</script>
<style>
    #every-statistics .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
      font-weight: normal;
    }
    #every-statistics .el-card__body{
      padding: 0px 20px 0px 20px;
    }
    #every-statistics .el-button{
        line-height: 14px;
        height: 40px;
    }
    #every-statistics .el-button+.el-button{
      margin-left: 0;
    }
    #every-statistics .el-button [class*=el-icon-]+span{
      margin-left: 2px;
    }
    #every-statistics .el-tabs__item{
      font-size: 16px;
    }
    #every-statistics .el-table1::before{
      height: 0;
    }
    #every-statistics .el-date-editor .el-range-separator{
        line-height: 40px!important;
        height: 40px!important;
    }
    #every-statistics .el-date-editor .el-range__icon{
        line-height: 40px!important;
        height: 40px!important;
    }
    #every-statistics .el-date-editor--datetimerange.el-input__inner{
      width: 428px;
    }
    #every-statistics .el-table{
        margin: 0 auto;
    }
</style>
<style lang="scss" scoped>

    #every-statistics{
        font-weight: normal;
        .box-card{
            margin:20px 0 20px 0!important;
            padding-bottom:20px;
        }
        .box-card1{
          padding-bottom: 0;
        }

    }
   #every-statistics .el-breadcrumb{
    margin-top: 30px;
        font-size: 16px;
   }
   .header-item{
        margin-right:10px;
        min-width:240px;
        height:40px;
        margin-top:20px;
        float: left;
    }
    .header-item-left,.header-item-right{
        float: left;
    }
    .header-item-right{
        width:194px;
    }
    .header-item-left{
        height:40px;
        line-height: 40px;
        margin-right: 10px;
    }
  .mr24{
    margin-right: 10px;
  }
  .header-top{
    width: 90%;
     height:12px;
   /* min-height: 12px; */
  }
  .header-button{
    height:40px;
    float: left;
    margin-top:20px;
    
  }
  .header-button1{
    height:40px;
    margin:0 auto;
    margin-top:20px;
    margin-bottom:20px;
  }
  .pan{
      margin-top:10px;
      margin-right:10px;
  }
  .pic{
    display: block;
  }
  .tit-header{
    height:40px;
    line-height: 40px;
  }
  .titfl{
    float: left;
  }
  .green{
    color: green;
  }
  .red{
    color: red;
  }
  .ml20{
    margin-top:12px;
  }
  .elpa{
    margin:0 auto;
  }
</style>
